<template>
  <div class="defaultForm">
    <el-form :model="dataForm" :rules="rules" ref="dataForm" size="small" label-width="100px">
      <el-row :gutter="30">
        <el-col :span="12">
          <div class="grid-content">
            <el-form-item label="学院名称" prop="xyname">
              <el-input v-model="dataForm.xyname"></el-input>
            </el-form-item>
            <el-form-item label="课程名称" prop="kcname">
              <el-input v-model="dataForm.kcname"></el-input>
            </el-form-item>
            <el-form-item label="课程教师" prop="jsname">
              <el-input v-model="dataForm.jsname"></el-input>
            </el-form-item>
            <el-form-item label="课程时长" prop="kctime">
              <el-input v-model="dataForm.kctime"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12" class="row-bg">
          <div class="grid-content">
            <el-form-item label="课程封面" prop="url">
              <el-upload
                    class="avatar-uploader"
                    action=""
                    :http-request="Upload"
                    :show-file-list="true"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="24">
          <div class="grid-content-bottom">
            <el-form-item label="课程简介" prop="kcjj">
              <el-input type="textarea" :rows="4" v-model="dataForm.kcjj"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('dataForm')">提交申请</el-button>
              <el-button @click="$router.back(-1)">返回</el-button>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { client } from "../../../util/alioss";
import { getStore } from "../../../libs/storage";
export default {
  data() {
    return {
      imageUrl: "",
      dataForm: {
        xyname: "",
        kcname: "",
        jsname: "",
        kctime: "",
        kcjj: "",
        url:""
      },
      rules: {
        xyname: [
          { required: true, message: "请输入学院名称！", trigger: "blur" }
        ],
        kcname: [
          { required: true, message: "请输入课程名称！", trigger: "blur" }
        ],
        jsname: [
          { required: true, message: "请输入教师名称！", trigger: "blur" }
        ],
        kctime: [
          { required: true, message: "请输入课程时间！", trigger: "blur" }
        ],
        kcjj: [{ required: true, message: "请输入课程简介！", trigger: "blur" }]
      }
    };
  },
  methods: {

      async Upload(file) {
      //console.log(file.file.name)
      var fileName = "courseimg/" + file.file.uid + "/" + file.file.name;
      //定义唯一的文件名，打印出来的uid其实就是时间戳,/前为文件夹
      let result= client().put(fileName, file.file);
      console.log(result);
   // client().multipartUpload(fileName, file.file).
     // console.log(res);
      this.dataForm.url =
        "http://team6.oss-cn-beijing.aliyuncs.com/" + fileName;
      //console.log(this.addCouForm)
      console.log(this.dataForm.url);
    //   this.$axios
    //     .post("/stuworkup", {
         
    //       url: this.imageUrl
    //     })
    },
    submitForm(dataForm) {
      var this_ = this;
      this.$refs[dataForm].validate(valid => {
        if (valid) {
          this.$axios
            .post("/book/create", {
              teacherid: getStore("teacherid"),
              courseName: this.dataForm.kcname,
              courseTeacher: this.dataForm.jsname,
              colloge: this.dataForm.xyname,
              coursetime: this.dataForm.kctime,
              synopsis: this.dataForm.kcjj,
              img:this.dataForm.url
            })
            .then(resp => {
              if (resp && resp.data.code == 200) {
                this.$notify({
                  title: "创建成功",
                  message: "课程创建成功,请等待审核",
                  type: "success"
                });
                this.$router.back(-1);
              }
            });
        } else {
          console.log("error!!!");
          this_.$message.error("申请失败!!!");
          return false;
        }
      });
    },
    // handleAvatarSuccess(res, file) {
    //   this.imageUrl = URL.createObjectURL(file.raw);
    // },
    // beforeAvatarUpload(file) {
    //   const isJPG = file.type === "image/jpeg";
    //   const isPNG = file.type === "image/png";
    //   const isLt200K = file.size / 1024 / 200 < 1;

    //   if (!isJPG && !isPNG) {
    //     this.$message.error("上传图片只能是 JPG/PNG 格式!");
    //   }

    //   if (!isLt200K) {
    //     this.$message.error("上传图片大小不能超过 200KB!");
    //   }
    //   return isJPG && isLt200K;
    // }
  }
};
</script>

<style scoped>
.defaultForm {
  width: 95%;
  margin-top: 5px;
}

.grid-content {
  border-radius: 4px;
  margin: 20px;
}
.grid-content-bottom {
  border-radius: 4px;
  margin: 0px 20px 20px 20px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #c9c0c0;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 96px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}
.avatar {
  width: 96px;
  height: 128px;
  display: block;
}
</style>